<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{placeName}}</view>
		</view>
		<view class="cu-card no-card">
			<view class="cu-item padding">
				<view class="flex justify-between padding-bottom-sm solid-bottom margin-top">
					<view>业务类型</view>
					<view>{{businessTypeName}}</view>
				</view>
				<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
					<view>收费模版</view>
					<view>{{title || '---'}}</view>
				</view>
			</view>
		</view>
		<view class="list-body margin-top">
			<view class="cu-bar bg-white margin-top solid-bottom">
			    <view class="action">
			      <text class="cuIcon-title text-orange"></text>可切换的收费模版
			    </view>
			</view>
			<scroll-view scroll-y="true">
				<view class="cu-card no-card solid-bottom" v-for="(item,index) in listData" :key="index">
					<view class="cu-item padding">
						<view class="text-orange"><view class="title">收费模版：</view>{{item.title}}</view>
						<view>钱包最低余额：{{item.minWalletPrice}}元</view>
						<view>最大充电时长：{{item.maxChargeTimesMinute}}分钟</view>
						<view>预警充电额度：{{item.maxChargeElectricity}}度</view>
						<view>充满自停：开启</view>
						<block v-if="item.timeSetMeal && item.timeSetMeal.length>0">
							<view>时间套餐单位：小时</view>
							<view class="flex">
								<view>时间套餐：</view>
								<view v-for="(timee,timei) in item.timeSetMeal" :key="timei" class="cu-tag round sm bg-orange">{{timee}}</view>
							</view>
						</block>
						<view class="btn-info">
							<view class="cu-tag round bg-grey padding" v-if="(feeTemplateId == null && item.id == null) || (feeTemplateId != null && feeTemplateId == item.id)">当前</view>
							<button class="cu-btn bg-orange" @click="btnChangeTemplate(item)" v-else>切换此模版</button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeId:null,
				placeName:'网点名称',
				businessType:null,
				businessTypeName:null,
				title:null,
				feeTemplateId:null,
				info:{},			//当前收费模版
				listData:[]
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.placeId = data.placeId;
				_self.placeName = data.placeName;
				_self.businessType = data.businessType;
				_self.businessTypeName = data.businessTypeName;
				_self.title = data.title;
				_self.feeTemplateId = data.feeTemplateId;
				_self._loadDataList();
			})
		},
		methods: {
			_loadDataList:function(){
				const api = this.$request;
				const _self = this;
				api.post(api.url.cdczFeeList,{},res=>{
					console.log(res)
					if(res.code==200){
						_self.listData = res.body.items;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			btnChangeTemplate:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要切换【'+item.title+'】收费模版吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeCostTemplateChange,{
								placeId:_self.placeId,
								businessType:_self.businessType,
								feeTemplateId:item.id
							},res=>{
								console.log(res)
								if(res.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'success'
									});
									_self.title = item.title;
									_self.feeTemplateId = item.id;
									_self._loadDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container .list-body scroll-view{height:85vh;}
.container .list-body .cu-card .title {min-width:calc(4em + 30rpx);display:inline-block;margin-bottom:5rpx;}
.container .list-body .cu-card .cu-item {position: relative;}
.container .list-body .cu-card .cu-item .btn-info{position: absolute;bottom:30rpx;right:15rpx;}
</style>
